<template>
  <view class="container vmodel">
    <view v-if="bgShow" class="v-bg animate__animated animate__fadeIn"></view>
    <view class="mid-scene" v-if="midShow">
      <image
        class="mid-image animate__animated animate__heartBeat"
        style="width: 300px; height: 300px"
        src="/src/static/images/prize.png"
        mode="widthFix"
      />
    </view>
    <view
      id="rays"
      class="animate__animated animate__zoomIn animate__delay-2s"
      v-if="prizeShow"
    ></view>
    <view class="prize-scene animate__animated animate__zoomIn" v-if="prizeShow">
      <view>
        <view class="v-box">
          <image
            class="prizeImage"
            mode="scaleToFill"
            style="width: 180px; height: 180px"
            :src="prizeImage"
            @error="imageError"
          />
        </view>
        <view class="v-p1"> 恭喜获得{{ prizeName }},请到我的商品查看 </view>
        <view class="v-btn-wrap" justify-content="center" text-align="center">
          <image
            class="v-btn"
            @click="navigateTo('/pages/profile/index')"
            mode="widthFix"
            src="/src/static/images/prize_view_btn.png"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, unref } from 'vue';
  import 'animate.css';
  const bgShow = ref(false);
  const midShow = ref(false);
  const prizeShow = ref(false);

  function imageError(e) {}

  function navigateTo(url) {
    bgShow.value = false;
    prizeShow.value = false;
    uni.switchTab({
      url: '/pages/warehouse/index',
    });
  }

  const props = defineProps(['prizeName', 'prizeImage']);

  function showMidPop() {
    bgShow.value = true;
    midShow.value = true;
  }
  function showPrizePop() {
    midShow.value = false;
    prizeShow.value = true;
  }
  function closeMidPop() {
    bgShow.value = false;
    midShow.value = false;
  }
  function closePop() {
    bgShow.value = false;
    midShow.value = false;
    prizeShow.value = false;
  }
  defineExpose({
    showMidPop,
    showPrizePop,
    closePop,
    closeMidPop,
  });
</script>

<style lang="less">
  .vmodel .v-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    cursor: pointer;
    overflow: hidden;
  }

  .mid-scene {
    .mid-image {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 1000;
    }
  }

  #rays {
    background-image: url(/src/static/images/rays-main.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150vw;
    height: 150vw;
    /* microsoft ie */
    animation-name: spin;
    animation-duration: 40000ms;
    /* 40 seconds */
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: 999;
  }

  .prize-scene {
    width: 300px;
    height: 460px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1000;

    .v-p1 {
      color: #fff;
      text-align: center;
      display: block;
      padding: 0 0 20px 0;
      max-lines: 2;
    }
    .v-box {
      width: 300px;
      height: 350px;
      background-image: url(/src/static/images/prize_box.png);
      background-size: 100% 100%;
      display: block;
      position: relative;
      z-index: 1000;
      .prizeImage {
        position: absolute;
        // left: 50%;
        // bottom: 0;
        // transform: translate(-50%, -50%);
        z-index: 1000;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    }

    .v-btn-wrap {
      text-align: center;
      .v-btn {
        width: 200px;
        cursor: pointer;
        margin: 0 auto;
      }
    }
  }

  @keyframes spin {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
</style>
